<template>
  <div>
    <div class="wrapper" ref="wrapper" :style="{ height: height + 'px' }">
      <div class="box">
        <Loading v-if="films.length == 0" />
        <template v-for="item in films">
          <FilmItem :film="item" :key="'films_' + item.filmId" />
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import FilmItem from "../../components/FilmItem";
export default {
  data() {
    return {
      films: [],
      src: "https://img.lanrentuku.com/img/allimg/1212/5-121204193R0.gif",
      height: 500,
      bs: null,
      pageNum: 1,
    };
  },
   methods: {
    async getData(flag = 1) {
      let pageNum = this.pageNum;
      let ret = await this.$api.getNowPlayList({ cityId: 110100, pageNum });
      if (ret.data.films.length > 1) {
        this.pageNum++;
        if (flag == 1) {
          this.films = [...ret.data.films, ...this.films];
        } else {
          this.films = [...this.films, ...ret.data.films];
        }
      }
    },
  },
  async mounted() {
    let h = document.documentElement.clientHeight - 160;
    this.height = h;
    this.getData();
  },
  updated() {
    this.$nextTick(() => {
      this.bs = new BScroll(this.$refs["wrapper"], {
        click: true,
        //tap:"tap",
        probeType: 1,
        pullUpLoad: true,
        pullDownRefresh: true,
      });
      this.bs.on("pullingDown", () => {
        this.getData(1);

        this.bs.finishPullDown();
      });
      this.bs.on("pullingUp", () => {
        this.getData(0);
        this.bs.finishPullUp();
      });
    });
  },
  beforeDestroy() {
    this.bs = null;
  },
 
  components: {
    FilmItem,
  },
  created() {},
};
</script>
<style lang='scss' scoped>
.wrapper {
  // height: 400px;
  // background: gold;
  overflow: hidden;
}
</style>
